<template>
  <div>
    <div v-if="cur_act">
      <!-- 活动重要信息 -->
      <v-card flat>
        <h2 class="mb-2">{{ cur_act.title }}</h2>
        <v-container class="ma-0 pa-0 font-weight-bold" fill-height>
          <v-chip
            v-if="creator"
            color="blue"
            dark
            @click="goto_profile(creator.username)"
            >发起人:{{ creator.full_name }}</v-chip
          >
          <v-chip class="act-tag ml-2" color="orange" dark
            >#{{ cur_act.typ_e }}</v-chip
          >
          <v-chip class="ml-2" color="purple" dark
            >时间: {{ cur_act.starttime }}</v-chip
          >
          <v-chip class="ml-2" color="purple" dark
            >地点: {{ cur_act.from }}</v-chip
          >
          <v-chip class="ml-2" color="green" dark
            >人数限制: {{ cur_act.currents }}/{{ cur_act.sum }}</v-chip
          >
        </v-container>
      </v-card>
      <v-divider class="my-5 grey lighten-3"></v-divider>
      <!-- 活动详情 -->
      <v-card flat>
        <h4 class="mb-2">详细信息</h4>
        <div>
          {{ cur_act.description }}
        </div>
      </v-card>

      <!-- 成员信息 -->
      <v-card class="mt-10" flat>
        <h4 class="mb-2">
          当前成员【{{ cur_act.currents }}/{{ cur_act.sum }}】
        </h4>
        <span v-for="(member, index) in members" :key="index">
          <router-link
            :to="{ name: 'User', params: { username: member.username } }"
            ><v-avatar class="mr-3" size="43">
              <img :src="member.avatar" :alt="member.full_name" /> </v-avatar
          ></router-link>
        </span>
        <br />
        <v-progress-linear
          class="my-3"
          color="green"
          buffer-value="0"
          :value="(cur_act.currents / cur_act.sum) * 100"
          stream
          rounded
        ></v-progress-linear>
      </v-card>
      <!-- 操作 -->
      <v-card v-if="user && creator" class="mt-10" flat
        ><v-btn @click="like"
          ><v-icon color="blue" left> mdi-thumb-up </v-icon
          >{{ cur_act.likes }}</v-btn
        >
        <span v-if="creator.id == user.id"
          ><v-btn @click="cancel_activity" class="ml-5" color="#FF6347" dark
            ><v-icon left> mdi-trash-can </v-icon>取消活动</v-btn
          ><v-btn @click="edit_activity" class="ml-5" color="blue" dark
            ><v-icon left> mdi-pencil </v-icon>编辑活动</v-btn
          >
        </span>
        <v-btn
          v-else-if="joined"
          @click="quit_activity"
          class="ml-5"
          color="blue"
          dark
          ><v-icon left> mdi-account-minus </v-icon>退出活动</v-btn
        >
        <v-btn
          v-else-if="cur_act.currents <= cur_act.sum"
          @click="join_activity"
          class="ml-5"
          color="blue"
          dark
          ><v-icon left> mdi-account-plus </v-icon>加入活动</v-btn
        >
      </v-card>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";

export default {
  name: "ActivityDetail",
  props: ["activity"],
  data() {
    return {
      creator: null,
      members: null,
      joined: false,
      cur_act: null,
    };
  },
  computed: {
    ...mapGetters({ user: "stateUser" }),
  },
  methods: {
    // 判断用户是否已经加入
    has_joined() {
      if (this.members) {
        for (let i = 0; i < this.members.length; i++) {
          if (this.user && this.members[i].id == this.user.id) return true;
        }
      }
      return false;
    },
    // 更新成员列表
    async update_members() {
      await axios
        .get("activities/" + this.activity.id + "/users")
        .then((res) => {
          this.members = res.data.users;
        });
      if (this.has_joined()) this.joined = true;
      else this.joined = false;
    },
    // 转到用户信息页
    goto_profile(username) {
      this.$router.push("/users/" + username);
    },
    // 加入活动
    async join_activity() {
      await axios.post("activities/joinact", { activity_id: this.activity.id });
      this.update_members();
      this.joined = true;
      this.cur_act.currents += 1;
    },
    // 退出活动
    async quit_activity() {
      await axios.post("activities/leaveact", {
        activity_id: this.activity.id,
      });
      this.update_members();
      this.joined = false;
      this.cur_act.currents -= 1;
    },
    // 编辑活动
    edit_activity() {
      this.$router.push("/activities/" + this.cur_act.id + "/edit");
    },
    // 取消活动
    async cancel_activity() {
      await axios.post("activities/delete_act", {
        activity_id: this.activity.id,
      });
      this.$router.push("/");
    },
    // 点赞
    async like() {
      await axios.post("activities/likeit", { activity_id: this.activity.id });
      this.activity.likes += 1;
    },
    // 加载用户信息
    async loadUserInfo() {
      let id = this.activity.creator;
      await axios.get("user_by_id/" + id).then((res) => {
        this.creator = res.data.user;
      });
    },
  },
  // 渲染前加载用户信息
  mounted() {
    this.loadUserInfo();
    this.cur_act = this.activity;
    this.update_members();
  },
};
</script>

<style>
.trip {
  color: orange;
}

.sport {
  color: green;
}

.other {
  color: grey;
}

.act-tag {
  font-size: 1rem;
  font-weight: 900;
}
</style>